.che-list-item-checkbox
  top 1px
  margin 0
  height 36px
  display flex
  vertical-align middle

  div
    margin 0

  div.md-container
    outline none
    width 18px
    height 18px

  div.md-icon
    background-color $list-checkbox-background-color
    border-color #C3C3C3
    border-width 1px
    width 16px
    height 16px
    margin 1px

  div.md-icon::after
    top 2px
    left 5.5px
    width 5.5px
    height 11px

.che-list-item-checkbox-main
  cursor pointer
  float left
  padding-left 12px

/*
 * Handle the 3 possible states for the icon/checkbox zone.
 */

/* hover one the icon/checkbox zone */

.che-list-item-checkbox-main:hover md-icon
  display none

/* checked, hovered or not */

.che-list-item-checkbox-main md-checkbox.che-list-item-checkbox[aria-checked="true"]
  display inline-block

.che-list-item-checkbox-main md-checkbox.che-list-item-checkbox[aria-checked="true"] + md-icon
  display none

/* ground state : not hovered, not checked */

.che-list-item-checkbox-main md-checkbox.che-list-item-checkbox
  display none

.che-list-item-checkbox-main md-icon
  display inline-block

.che-checkbox-area
  width 70px
  .che-list-item-checkbox-main md-checkbox.che-list-item-checkbox
    display inline-block
  .che-list-item-checkbox-main md-icon
    display none

.che-checkbox-area > *
  width inherit
